<template>
  <el-form ref="form" :model="form" label-width="100px">
    <table class="layui-table" border="1" style="border-color: #E4E7ED;">
      <tbody>
      <tr>
        <th>绑定</th>
        <td>
          <el-form-item label="OA系统账号" prop="id">
            <el-select v-model="form.id" class="w300" @change="getStaffMsg">
              <el-option :label="user.username" :value="user.id" :key="user.id" v-for="user in common.staffList"></el-option>
            </el-select>
          </el-form-item>
        </td>

        <td><el-form-item label="账号" prop="account"><el-input v-model="form.account" @input="$forceUpdate()" class="w200"></el-input></el-form-item></td>

      </tr>

      <tr>
        <th rowspan="10">基本情况</th>
        <td><el-form-item label="姓名" prop="realname"><el-input v-model="form.realname" @input="$forceUpdate()" class="w200"></el-input></el-form-item></td>
        <td>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" class="w200">
              <el-option :label="sex.title" :value="sex.id" :key="sex.id" v-for="sex in sexList"></el-option>
            </el-select>
          </el-form-item>
        </td>
        <td rowspan="7">

          <el-form-item>
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :data="data"
            >
              <img v-if="form.avatar" :src="form.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

        </td>
      </tr>
      <tr>
        <td><el-form-item label="民族" prop="nation"><el-input v-model="form.nation" class="w200"></el-input></el-form-item></td>
        <td><el-form-item label="身份证" prop="id_card"><el-input v-model="form.id_card" class="w200"></el-input></el-form-item></td>
      </tr>

      <tr>
        <td>
          <el-form-item label="政治面貌" prop="identify">
            <el-select v-model="form.identify" class="w200">
              <el-option :label="item.title" :value="item.id" :key="item.id" v-for="item in identifyList"></el-option>
            </el-select>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="婚姻状态" prop="marriage">
            <el-select v-model="form.marriage" class="w200">
              <el-option :label="item.title" :value="item.id" :key="item.id" v-for="item in marriageList"></el-option>
            </el-select>
          </el-form-item>
        </td>
      </tr>

      <tr>
        <td>
          <el-form-item label="毕业时间" prop="graduate_date">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.graduate_date" class="w200" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="工作时间" prop="job_date">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.job_date" class="w200" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </td>
      </tr>

      <tr>
        <td><el-form-item label="专业" prop="professional"><el-input v-model="form.professional" class="w200"></el-input></el-form-item></td>
        <td><el-form-item label="户口地址" prop="registered_place"><el-input v-model="form.registered_place" class="w200"></el-input></el-form-item></td>
      </tr>

      <tr>
        <td><el-form-item label="籍贯" prop="native_place"><el-input v-model="form.native_place" class="w200"></el-input></el-form-item></td>
        <td><el-form-item label="邮政编码" prop="zip_code"><el-input v-model="form.zip_code" class="w200"></el-input></el-form-item></td>
      </tr>

      <tr>
        <td><el-form-item label="联系电话" prop="telephone"><el-input v-model="form.telephone" class="w200"></el-input></el-form-item></td>
        <td><el-form-item label="地址" prop="address"><el-input v-model="form.address" class="w200"></el-input></el-form-item></td>
      </tr>

      <tr>
        <td><el-form-item label="手机" prop="phone"><el-input v-model="form.phone" class="w200"></el-input></el-form-item></td>
        <td><el-form-item label="现居地址" prop="current_address"><el-input v-model="form.current_address" class="w200"></el-input></el-form-item></td>
      </tr>

      <tr>
        <td><el-form-item label="公司邮箱" prop="company_email"><el-input v-model="form.company_email" class="w200"></el-input></el-form-item></td>
        <td><el-form-item label="个人邮箱" prop="email"><el-input v-model="form.email" class="w200"></el-input></el-form-item></td>
      </tr>

      <tr>
        <td colspan="3">
          <el-form-item label="备注" prop="desc">
            <el-input
              type="textarea"
              v-model="form.desc"
              maxlength="1500"
              show-word-limit
            ></el-input>
          </el-form-item>
        </td>
      </tr>

      <tr>
        <th rowspan="6">入司情况</th>
        <td colspan="3">
          <el-form-item label="所属部门" prop="deptid_list">

            <el-checkbox-group v-model="form.deptid_list">
              <el-checkbox :label="item.id" :key="item.id"  v-for="item in common.deptList">{{item.title}}</el-checkbox>
            </el-checkbox-group>

          </el-form-item>
        </td>
      </tr>

      <tr>
        <td colspan="3">
          <el-form-item label="担任职务" prop="position_id">
            <el-select v-model="form.main_position_id" class="w200">
              <el-option :label="item.title" :value="item.id" :key="item.id" v-for="item in common.positionList"></el-option>
            </el-select>


          </el-form-item>
        </td>
      </tr>


      <tr>
        <td colspan="3">
          <el-form-item label="关联职务" prop="role_list">
            <el-checkbox-group v-model="form.role_list">
              <el-checkbox :label="item.id"  :key="item.id" v-for="item in common.positionList">{{item.title}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </td>
      </tr>



      <tr>
        <td>
          <el-form-item label="入职时间" prop="hiredate">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.hiredate" class="w200" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </td>

        <td>
          <el-form-item label="转正时间" prop="positive_date">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.positive_date" class="w200" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </td>
      </tr>

      <tr>
        <td>
          <el-form-item label="到期时间" prop="expire_date">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.expire_date" class="w200" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </td>

        <td>
          <el-form-item label="续签时间" prop="renew_date">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.renew_date" class="w200" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </td>
      </tr>

      <tr>
        <td colspan="3">
          <el-form-item label="公司备注" prop="note">
            <el-input
              type="textarea"
              v-model="form.note"
              maxlength="1500"
              show-word-limit
            ></el-input>
          </el-form-item>
        </td>
      </tr>

      <tr>
        <td colspan="4">
          <el-form-item style="text-align: center;">
            <el-button type="primary" @click="commitRecord">立即提交</el-button>
            <el-button type="info" @click="resetForm">重置</el-button>
          </el-form-item>
        </td>
      </tr>
      </tbody>
    </table>
  </el-form>
</template>

<script>
    import {mapState} from "vuex"
    import {getStaffInfo} from '@/apilist/Staff'
    import {editStaffMsg} from "@/apilist/Personnel"
    export default {
        name: "addRecord",
        computed: {
            ...mapState("Common",["common"]),
        },
        data(){
            return {
                identifyList : [
                    {id: 1,title: '少先队员'},
                    {id: 2,title: '共青团员'},
                    {id: 3,title: '党员'},
                    {id: 4,title: '群众'},
                ],
                marriageList: [
                    {id: 1,title: '已婚'},
                    {id: 2,title: '未婚'},
                    {id: 3,title: '保密'},
                ],

                sexList: [
                    {id: 1,title: '男'},
                    {id: 2,title: '女'},
                    {id: 3,title: '保密'},
                ],

                uploadUrl: this.fun.APP_VUE_UPLOAD_URL,
                data: {dir: 'avatar'},
                form: {
                    id: '',
                    avatar: '',
                    sex: '',
                    nation: '',
                    id_card: '',
                    identify: '',
                    marriage: '',
                    graduate_date: '',
                    job_date: '',
                    professional: '',
                    registered_place: '',
                    native_place: '',
                    zip_code: '',
                    telephone: '',
                    address: '',
                    phone: '',
                    current_address: '',
                    company_email: '',
                    deptid_list: [],
                  main_position_id: '',
                    hiredate: '',
                    positive_date: '',
                    expire_date: '',
                    renew_date: '',
                    note: '',
                    role_list: [],
                    desc:'',
                    email: "",
                  realname: '',
                  account: '',
                },

            }
        },
        methods: {
            resetForm(){
                this.form.realname = '';
                this.$refs['form'].resetFields();
            },
            commitRecord(){
                editStaffMsg(this.form).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        onClose: ()=>{
                            this.resetForm()
                        }
                    })
                })
            },
            getStaffMsg(){
                getStaffInfo({id:this.form.id}).then(res => {
                    const {data} = res
                    this.form.realname = data.username
                    this.form.account = data.account
                    this.form.sex = data.sex
                    this.form.nation = data.nation
                    this.form.id_card = data.id_card
                    this.form.identify = data.identify
                    this.form.marriage = data.marriage
                    this.form.graduate_date = data.graduate_date
                    this.form.job_date = data.job_date
                    this.form.professional = data.professional
                    this.form.registered_place = data.registered_place
                    this.form.native_place = data.native_place
                    this.form.zip_code = data.zip_code
                    this.form.telephone = data.telephone
                    this.form.address = data.address
                    this.form.phone = data.phone
                    this.form.current_address = data.current_address
                    this.form.company_email = data.company_email
                    this.form.email = data.email
                    this.form.deptid_list = data.deptid
                    this.form.main_position_id = data.position_id
                    this.form.hiredate = data.hiredate
                    this.form.positive_date = data.positive_date
                    this.form.expire_date = data.expire_date
                    this.form.renew_date = data.renew_date
                    this.form.note = data.note
                    this.form.avatar = data.avatar
                    this.form.role_list = data.roleid
                    this.form.desc = data.desc
                })
            },
            handleAvatarSuccess(res,file){
                this.form.avatar = res.data.fileUrl
            },
        },
    }
</script>

<style scoped>
  .layui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #fff;
    border-collapse: collapse;
    border-spacing: 2px;
    box-sizing: border-box;
  }
  .layui-table td div{
    margin: 5px auto;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border:1px solid #8c939d;
    border-radius: 89px;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }


</style>
